Flutter / UI Elements / Slidable
PageView
-
Code
In flutter_slidable, the SlidableAction class is used to define custom actions for the Slidable widget. It allows you to create your own custom slide actions to be used within a Slidable.
1. pubspec.yaml
dependencies: flutter: sdk: flutter flutter_slidable: ^0.6.0 2. screen
import 'package:flutter/material.dart'; import 'package:flutter_slidable/flutter_slidable.dart'; void main() { runApp(MyApp()); } class MyApp extends StatelessWidget { final List items = List.generate(20, (index) => 'Item ${index + 1}'); @override Widget build(BuildContext context) { return MaterialApp( home: Scaffold( appBar: AppBar( title: Text('Slidable Action Example'), ), body: ListView.builder( itemCount: items.length, itemBuilder: (context, index) { return Slidable( actionPane: SlidableDrawerActionPane(), actionExtentRatio: 0.25, child: ListTile( title: Text(items[index]), ), actions: [ SlidableAction( onPressed: (context) { // Handle custom action print('Custom action on item: ${items[index]}'); }, backgroundColor: Colors.green, foregroundColor: Colors.white, icon: Icons.check, label: 'Complete', ), ], secondaryActions: [ IconSlideAction( caption: 'Delete', color: Colors.red, icon: Icons.delete, onTap: () { // Handle delete action print('Deleted item: ${items[index]}'); }, ), ], ); }, ), ), ); } } In this example:
The Slidable widget wraps each ListTile in the ListView.builder.
Inside Slidable, there's a custom action defined using SlidableAction. This action has a green background, a white icon, and a label of "Complete". When triggered, it prints a message to the console.
Additionally, there's a secondary action using IconSlideAction to showcase a default slide action.